<template>
  <Modal
    v-model="modal"
    :title="title"
    :closable="false"
    :transfer="transfer"
    :mask-closable="false"
    :width="width">
    <template v-slot:footer>
      <div class="footer">
        <div style="flex: 1" />
        <Button @click="onCancel">{{ cancelText || '取消' }}</Button>
        <Button @click="onPreview" v-if="previewFlag">{{ previewText || '预览' }}</Button>
        <Button
          type="primary"
          @click="onOK"
          :disabled="okDisabled"
          :loading="loading"
          v-preventReClick
          v-if="showOk">
          {{ okText || '确定' }}
        </Button>
      </div>
    </template>
    <slot></slot>
    <dt-info :label-width="labelWidth" ref="info" :opt="Opt" @change="onChange"></dt-info>
    <slot name="bottom"></slot>
  </Modal>
</template>

<script>
  import dt from '@dt/dt'
  export default {
    props: {
      width: Number,
      title: String,
      previewFlag: Boolean,
      previewText: String,
      cancelText: String,
      cancelTip: String,
      alwaysTip: Boolean,
      okText: String,
      loading: Boolean,
      labelWidth: Number,
      okDisabled: {
        type: Boolean,
        default: false
      },
      transfer: {
        type: Boolean,
        default: false
      },
      showOk: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        modal: false,
        info: null,

        isEdit: false,
        Opt: null
      }
    },
    methods: {
      show(Opt, info) {
        if (Opt) {
          this.opt = Opt
          this.info = info ? info : Opt.info
          this.$refs.info.init(Opt, info)
        }

        this.modal = true
        this.$nextTick(() => {
          this.$refs.info.update()
          setTimeout(() => {
            this.isEdit = false
          }, 100)
        })
      },
      hide() {
        this.$refs.info.clear()
        this.$emit('cancelData') //清理外部数据
        this.modal = false
      },
      update(Opt) {
        this.Opt = Opt
      },
      onCancel() {
        if (this.isEdit || this.alwaysTip) {
          dt.ui.Modal.confirm({
            title: this.cancelTip || '是否放弃编辑内容？',
            onOk: () => {
              this.$emit('cancel', {
                ...this.info
              })
              this.hide()
            }
          })
        } else {
          this.hide()
        }
      },
      onOK() {
        this.$refs.info.validate().then((res) => {
          if (res) {
            this.$emit('ok', {
              ...this.info
            })
          } else {
            console.warn('dt-model-edit', this.info)
          }
        })
      },
      onPreview() {
        this.$refs.info.validate().then((res) => {
          if (res) {
            this.$emit('onPreview', {
              ...this.info
            })
          } else {
            console.warn('dt-model-edit', this.info)
          }
        })
      },
      onChange(data) {
        this.isEdit = true
      }
    },
    directives: {
      preventReClick: {
        inserted(el, binding) {
          el.addEventListener('click', () => {
            if (!el.disabled) {
              el.disabled = true
              setTimeout(() => {
                el.disabled = false
              }, binding.value || 3000)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer {
    display: flex;
  }
</style>
